<style lang="sass" scoped>
    .container{
        padding-bottom:122px;
    }
    .top{
        background:rgb(255, 95, 95);
        .user{
            padding:16px;
            justify-content:space-between;
            .user-name{
                width:500px;
                align-items:center;
                img{
                    width:50px;
                    height:50px;
                }
                .text{
                    font-size:24px;
                    color:#fff;
                    flex:1;
                    margin-left:10px;
                }
            }
            &>.img{
                width:50px;
                height:50px;
                img{
                    display:block;
                        width:100%;
                            height:100%;
                }
            }
        }
        .data{
            text-align:center;
            .text1{
                font-size:30px;
                color:#fff;
            }
            .text2{
                color:#fff;
                .price{
                    font-size:40px;
                    margin-right:20px;
                }
                .currency{
                    font-size:24px;
                }
            }
            .text3{
                font-size:24px;
                color:#fff;
            }
        }
        .navs{
            margin-top:30px;
            .nav{
                height:120px;
                flex:1;
                background:rgba(255,255,255,0.3);
                display:flex;
                align-items:center;
                justify-content:center;
                flex-direction: column;
                &.active{
                    background:rgba(255,255,255,0.6);
                }
                div{
                    color:#fff;
                    font-size:24px;
                }
            }
            .line{
                width:5px;
            }
        }
    }
    .detail{
        background:rgb(255, 248, 248);
        padding:15px;
        .title{
            font-size:24px;       
        }
        .search-cont{
            select{
                width:120px;
                border:1px solid #ccc;
                border-radius:10px;
                margin-right:10px;
                font-size:24px;
            }
            .order-count{
                flex:1;
                text-align:right;
                font-size:24px;       
            }
        }
        .order-detail{
            .list{
                background: #fff;
                margin-top:10px;
                height:200px;
                padding:25px;
                .order{
                    .order-no{
                        width: 400px;
                        font-size:24px;
                    }
                    .order-price{
                        text-align: right;
                        flex:1;
                        font-size:24px;
                    }
                }
                .time{
                    color: #ccc;
                    font-size:24px;
                }
            }
        }
        .tixian-detail{
            .list{
                background: #fff;
                padding:25px;
                &>div{
                    font-size:24px;
                }
                .date{
                    width:140px;
                    text-align:center;
                }
                .price{
                    flex:1;
                    text-align:center;
                    margin:0 30px;
                }
                .status{
                    width:120px;
                    text-align:center;
                }
                .icon{
                    width:24px;
                    align-items:center;
                    img{
                        display:block;
                        width:24px;
                    }
                }
            }
        }
    }
    .footer{
        position:fixed;
        z-index:10;
        bottom:0;
        left:0;
        height:122px;
        width:750px;
        background:#fff;
        .btn{
            background:#ff6e6e;
            width:100%;
            color:#fff;
            font-size:36px;
            line-height:122px;
            text-align:center;
        }
    }
</style>
<template>
    <div class="container">
        <div class="top">
            <div  class="user flex">
                <router-link :to="{name:'user_detail'}" tag="div" class="user-name flex">
                    <img src="../../assets/images/user1.png" alt="">
                    <div class="text">{{userinfo.userName}}</div>
                </router-link>
                <router-link :to="{name:'help'}" tag="div" class="img">
                    <img src="../../assets/images/wenhao.png" alt="">
                </router-link>
            </div>
            <div class="data">
                <div class="text1">当前可提现</div>
                <div class="text2"><span class="price">{{info.balance}}</span><span class="currency">元</span></div>
                <div class="text3">提成比例{{info.commissionRate}}%</div>
            </div>
            <div class="navs flex">
                <div @click="type=1" class="nav" :class="{'active':type===1}">
                    <div>总交易金额</div>
                    <div>{{info.totalFee}}元</div>
                </div>
                <div class="line"></div>
                <div @click="type=2" class="nav" :class="{'active':type===2}">
                    <div>累计提成</div>
                    <div>{{info.withdrawalFee}}元</div>
                </div>
            </div>
        </div>
        <div class="detail">
            <div v-if="type===1" class="order-detail">
                <div class="title">订单明细</div>
                <div class="search-cont flex">
                    <select v-model="post.year">
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020">2020</option>
                    </select>
                    <select v-model="post.month">
                        <option v-for="(item,i) in month" :value="item">{{item}}</option>
                    </select>
                    <div class="order-count">订单数：{{post.totalNum}}</div>
                </div>
                <div v-for="(item,i) in orderlist" class="list">
                    <div class="order flex">
                        <div class="order-no">订单：{{item.orderNo}}</div>
                        <div class="order-price">交易额：{{item.realPayFee}}</div>
                    </div>
                    <div class="order flex">
                        <div class="order-no">成本：{{item.costPrice}}</div>
                        <div class="order-price">利润：{{item.profits}}</div>
                    </div>
                    <div class="order flex">
                        <div class="order-no">提成金额：{{item.commissionFee}}</div>
                        <div class="order-price">提成比例：{{item.commissionRate}}%</div>
                    </div>
                    <div class="time">时间：{{item.createTime}}</div>
                </div>
            </div>
            <div v-if="type===2" class="tixian-detail">
                <div class="title">提现明细</div>
                <div @click="goDetail(item)" v-for="(item,i) in withdrawlist" class="list flex">
                    <div class="date">{{item.date}}</div>
                    <div class="price">{{item.withdrawFee}}元</div>
                    <div class="status">{{item.status===0?'正在提现':'提现成功'}}</div>
                    <div v-if="item.status===1" class="icon flex">
                        <img src="../../assets/images/right.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="footer flex">
            <router-link :to="{name:'apply'}" class="btn" tag="div">提现</router-link>
        </div>
        <totop></totop>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    export default {
        components: {
            totop,
        },
        data() {
            return {
                month:[1,2,3,4,5,6,7,8,9,10,11,12],
                info:{},
                userinfo:{},
                post:{
                    year:new Date().getFullYear(),	//是	string	年份
                    month:new Date().getMonth()!==11? new Date().getMonth()+1:12,//	是	string	月
                    startNum:0,//	是	string	下一页开始值
                    totalNum:0,
                },
                orderlist:[],
                withdrawlist:[],
                type:1,
            };
        },
        watch:{
            'type'(val){
                this.post.startNum = 0;
                if(val===1){
                    this.getOrderList();
                }else{
                    this.getWithdrawRecordListPage();
                }
            },
            'post.year'(val){
                this.post.startNum = 0;
                this.getOrderList();
            },
            'post.month'(val){
                this.post.startNum = 0;
                this.getOrderList();
            },
        },
        created(){
            this.getInfo();
            if(this.type===1){
                this.getOrderList();
            }else{
                this.getWithdrawRecordListPage();
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.userinfo = util.getCookie('userMsg')?JSON.parse(util.getCookie('userMsg')):{};
            });
        },
        methods: {
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-dms/api/index/getIndexData',
                    success:(data=>{
                        this.info = data.data;
                    })
                })
            },
            getOrderList(){
                let param = JSON.parse(JSON.stringify(this.post));
                util.ajax({
                    url:config.baseApi + 'bookMall-dms/api/index/getOrderListPage',
                    data:param,
                    success:(data=>{
                        this.orderlist = data.data.record;
                        this.post.startNum = data.data.startNum;
                        this.post.totalNum = data.data.totalNum;
                    })
                })
            },
            getWithdrawRecordListPage(){
                util.ajax({
                    url:config.baseApi + 'bookMall-dms/api/withdraw/getWithdrawRecordListPage',
                    data:{
                        startNum:this.post.startNum
                    },
                    success:(data=>{
                        this.withdrawlist = data.data.record;
                        this.post.startNum = data.data.startNum;
                        this.post.totalNum = data.data.totalNum;
                    })
                })
            },
            goDetail(item){
                if(item.status===0)return;
                router.push({name:'apply_detail',query:{withdrawNo:item.withdrawNo}})
            }
        },
        
    };
</script>